<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="msg">

        <input type="checkbox" name="color" value="red" v-model="isChecked">
        <input type="checkbox" name="color" value="green" v-model="isChecked">
    
        <select name="" id="gender" v-model="gender">
            <option value="0">unknow</option>
            <option value="1">male</option>
            <option value="2">female</option>
        </select>

        <!-- document.querySelector("#gender").value -->
    </div>

    <script>
        
        // data中的数据，其实在vm对象初始化的时候，就被加到了vm对象上
        // 最终在页面中展示的数据，其实就是vm对象中的数据


        //注意： 在视图中用到的数据，都必须提前在data中声明好。否则会报错
        // Property or method "xxxx" is not defined on the instance but referenced during render.
        

        // 如果v-model用在复选框上
        // 绑定的数据可以有两种值：
        // 1. 布尔值：  可以控制复选框的选中状态
        // 2. 数组:    当选中复选框的时候，复选框的value值会被存储到数组中
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello world",
                isChecked: [],
                gender: 0
            }
        })


        // 表单用在数据提交的时候

        // 之前没有学流行框架的时候，提交的过程
        // 1. 获取表单数据（DOM操作）
        // 2. ajax提交

        // 在学习Vue之后
        // 1. 获取表单数据（双向绑定）
        // 2. ajax提交

        // 获取表单数据的值，一定是通过数据绑定来实现，要忘记DOM操作
    </script>
</body>
</html>